<template>
  <div class="search-history">
    <van-cell-group>
      <van-cell title="搜索历史" class="history-nav">
        <van-icon name="delete-o" v-if="!lsdelete" @click="lsdelete = true" />
        <div class="oper" v-else>
          <span @click="removeHistoryAll">全部删除</span>
          <span @click="lsdelete = false">完成</span>
        </div>
      </van-cell>
    </van-cell-group>
    <div class="search-list">
    <van-cell-group>
      <van-cell :title="item" v-for=" (item, i) in list" :key="i" @click="b(item)">
        <van-icon name="close" v-if="lsdelete" @click="removeHistory(i)" />
      </van-cell>
    </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search-history',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      lsdelete: false
    }
  },
  methods: {
    removeHistory (index) {
      this.list.splice(index, 1)
    },
    removeHistoryAll () {
      this.$parent.historyList = []
    },
    b (item) {
      if (!this.lsdelete) {
        this.$emit('search', item)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-history{
    .history-nav {
      .oper{
        span {
          margin: 0 5px
        }
      }
  }
}

</style>
